<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>总结Vue的数据监测</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        Vue监视数据的原理
            1.Vue会监测data中所有层次的数据

            2.如何监测对象中的数据？
                通过setter实现监视，且要在new Vue时就传入要监测的数据。
                1.对象中后追加的数据，Vue默认不做响应式处理。
                2.如果需要后添加的数据做响应式处理，可以使用以下API：
                    Vue.set(target,propertyName/index,value)或
                    vm.$set(target,propertyName/index,value)

            3.如何监测数组中的数据？
                通过包裹数组更新元素的方法实现，本质就是做了两件事：
                    1.调用原生对应的方法对数组进行更新。
                    2.重新解析模板，进行页面更新。

            4.在Vue中修改数组中的某一个元素一定要用如下方法：
                1.使用这些API：push(),pop(),shift(),unshift(),splice(),sort(),reserve(),
                2.Vue.set()或者vm.$set()

            特别注意：Vue.set()或者vm.$set()不能给vm或者vm的根数据对象添加属性。
     -->
    <div id="root">
        <button @click="student.age.rAge++">年龄+1</button><hr>
        <button @click="addSex">添加一个性别信息</button><hr>
        <button @click="student.sex = '未知'">修改性别</button><hr>
        <button @click="addFriend">在列表首位添加一个朋友</button><hr>
        <button @click="updateFirstFriendName">修改第一个朋友的名称为二狗子</button><hr>
        <button @click="addHobby">添加一个爱好</button><hr>
        <button @click="updateFirstHobby">修改第一个爱好为开车</button><hr>
        <button @click="removeSmoke">移除爱好中的抽烟</button>
        <h2>学生姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
        <h2>rAge--{{student.age.rAge}},sAge--{{student.age.sAge}}</h2>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}---{{f.age}}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                name:'尚硅谷',
                address:'北京',
                school:{
                    
                },
                student:{
                    name:'tom',
                    age:{
                        rAge:40,
                        sAge:20
                    },
                    hobby:['抽烟','喝酒'],
                    friends:[
                        {name:'jerry',age:30},
                        {name:'tony',age:32}
                    ]
                }
            },
            methods:{
                addSex(){
                    Vue.set(this.student,'sex' , '男')
                },
                addFriend(){
                    this.student.friends.unshift({name:'狗子',age:33})
                },
                updateFirstFriendName(){
                    this.student.friends[0].name = '二狗子'
                    
                },
                addHobby(){
                    this.student.hobby.push('add')
                },
                updateFirstHobby(){
                    // this.student.hobby.splice(0,1,'开车')
                    // Vue.set(this.student.hobby,0,'开车')
                    this.$set(this.student.hobby,0,'开车')
                },
                removeSmoke(){
                    this.student.hobby=this.student.hobby.filter((h)=>{
                        return h !== '抽烟'
                    })
                }
            }
        })
    </script>
</body>
</html>